<template>
  <el-dialog v-if="contractOpen" :title="title" :visible.sync="contractOpen" :width="dialogWidth" :close-on-click-modal="false" @close="cancel">
    <!-- 基础信息-->
    <el-descriptions class="margin-top" title="基本信息" :column="computedColumns" border>
      <template slot="extra">
        <el-button type="primary" size="small">操作</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user" />
          用户名
        </template>
        {{ talentForm.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          手机号
        </template>
        {{ talentForm.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline" />
          性别
        </template>
        未知
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline" />
          评级
        </template>
        专家
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets" />
          备注
        </template>
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 沟通列表 -->
    <div v-if="first? true : htContractList.length > 0" class="infinite-list-wrapper" style="overflow:auto;max-height:300px">
      <ul
        v-infinite-scroll="load"
        class="list"
        infinite-scroll-disabled="disabled"
      >
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="c in htContractList" :key="c.id" :name="c.id">
            <template slot="title">
              <div style="line-height:inherit">
                <span>沟通时间 【{{ c.createdAt.substring(0, 19).replace('T', ' ') }}】</span>
                <span v-if="c.notifyTime" style="color: #409EFF;">
                  提醒时间：{{ c.notifyTime && c.notifyTime.replace('T', ' ').replace('Z', '') }}
                </span>
              </div>
            </template>
            <div>{{ c.note }}</div>
          </el-collapse-item>
        </el-collapse>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore" />
    </div>
    <div style="margin-top: 20px;">
      <el-form ref="form" :model="form" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="沟通内容">
              <el-input v-model="formData.note" type="textarea" placeholder="请输入沟通内容" :autosize="{ minRows: 2, maxRows: 11}" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提醒时间">
              <el-date-picker
                v-model="formData.notifyTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择提醒时间"
                clearable
              />
            </el-form-item>
          </el-col></el-row>
        <el-input v-model="formData.talentId" type="hidden" />
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer" style="align-items: center; display: flex; justify-content: center;">
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addHtContract, listHtContract } from '@/api/hunter/ht-contract'
export default {
  name: 'TalentView',
  components: { },
  props: {
    form: {
      type: Object,
      default: null
    },
    projOptions: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    fromProject: {
      type: Boolean,
      default: false
    },
    contractOpen: {
      type: Boolean,
      default: false
    },
    onClose: {
      type: Function,
      required: true
    }
  },

  data() {
    return {
      count: 0,
      pageIndex: 1,
      pageSize: 10,
      loading: false,
      first: true,
      htContractList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      statusOptions: [],
      sexOptions: [],
      talentForm: {

      },
      formData: {
        talentId: 0,
        note: undefined,
        notifyTime: undefined
      },
      rules: {
        note: [{
          required: true,
          message: '请输入沟通内容',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    dialogWidth() {
      return window.innerWidth <= 600 ? '90%' : '70%'
    },
    noMore() {
      if (this.first) {
        return false
      }
      return this.htContractList.length >= this.count
    },
    disabled() {
      return this.loading || this.noMore
    },
    computedColumns() {
      return window.innerWidth <= 600 ? 1 : 2 // 1 column for mobile, 3 for larger screens
    },
    activeNames() {
      return this.htContractList.map((item) => {
        return item.id
      })
    }
  },
  watch: {},
  created() {
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    })
    this.getDicts('sys_user_sex').then(response => {
      this.sexOptions = response.data
    })
    if (this.form) {
      this.talentForm = this.form
      this.formData.talentId = this.form.id
    }
    this.open = this.contractOpen
    this.first = true
    this.htContractList = []
  },
  mounted() {},
  methods: {
    /** 提交按钮 */
    submit: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.formData.talentId > 0) {
            addHtContract(this.formData).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.pageIndex = 1
                this.htContractList = []
                this.load()
                this.resetForm()
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    resetForm() {
      this.formData.note = undefined
      this.formData.notifyTime = undefined
      this.$refs['form'].resetFields()
    },
    // 取消按钮
    cancel() {
      this.first = false
      this.pageIndex = 1
      this.onClose()
    },
    load() {
      // if (!this.first && this.htContractList.length >= this.count) {
      //   return
      // }
      this.loading = true
      var that = this
      listHtContract(
        {
          'talentId': this.formData.talentId,
          'pageIndex': this.pageIndex,
          'pageSize': this.pageSize,
          'createdAtOrder': 'desc'
        }).then(response => {
        that.first = false
        that.pageIndex++
        that.count = response.data.count
        if (that.htContractList.length < that.count) {
          that.htContractList = that.htContractList.concat(response.data.list)
        }
        that.loading = false
      })
    }
  }
}
</script>
